<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../../../assets/common/common.css" />
    <link rel="stylesheet" href="../../../assets/iconfont/iconfont.css" />
    <link rel="stylesheet" href="./reserve.css" />
  </head>
  <body>
    <div class="reserve">
      <!-- 头部 -->
      <header class="top flex aic bg-fff pl-10 pr-10 jc-sb">
        <a href="javascript:history.back(-1)">
        <span class="iconfont icon-xiangzuojiantou"></span>
      </a>
        <span>预定会议室</span>
        <span class="fix"></span>
      </header>
      <!-- 选择预定时间标题 -->
      <div class="mitting bg-fff pl-20 pr-20">
        <div class="fdc f14">
          <div class="details t-999 flex aic">
            <p>
              <span class="base">*</span>
              <span>会议标题</span>
            </p>
            <input placeholder="请输入" />
          </div>
          <div class="details time flex aic jc-sb">
            <p class="t-999">
              <span class="base">*</span>
              <span>开始时间</span>
            </p>
            <span class="fg1 ml-15">03月20日&nbsp; 12:30</span>
            <span class="iconfont icon-jiantou"></span>
          </div>
          <div class="details time flex aic jc-sb">
            <p class="t-999">
              <span class="base">*</span>
              <span>结束时间</span>
            </p>
            <span class="fg1 ml-15">03月20日&nbsp;13:00</span>
            <span class="iconfont icon-jiantou"></span>
          </div>
          <div class="up flex aic jc-sa">
            <p class="flex t-999">
              <span>上传附件</span>
              <span class="iconfont icon-fujianattachment14"></span>
            </p>
            <span class="upload">支持pdf, doc, docx, html, txt, jpg,
              png等格式文件上传，文件大小不超过10MB</span>
          </div>
        </div>
      </div>
      <!-- 会议室 -->
      <div class="mittingtips fdc f14 bg-fff mt-20 pl-10 pr-10">
        <div class="flex tips aic">
          <div>
            <span class="base">*</span>
            <span class="t-999">会议室</span>
          </div>
          <span class="ml-20">商务例会会议室</span>
        </div>
        <div class="flex tips aic">
          <span class="t-999">会议提醒</span>
          <span class="ml-20 btn">开/关</span>
        </div>
      </div>
      <!-- 参与人 -->
      <div class="partake mt-20 pl-20 pr-20 bg-fff">
        <div class="pt-10">
          <span class="base">*</span>
          <span>参与人</span>
          <span class="f12 t-999 ml-10">已选择2人</span>
        </div>
        <div class="mt-20">
          <img class="img1 rel" src="../../../assets/img/u4263.png" alt="" />
          <img class="img2 abs" src="../../../assets/img/u4264.png" alt="" />
        </div>
      </div>
      <!-- 会议间接 -->
      <div class="introduction pl-20 pr-20 bg-fff fdc mt-10 pt-10">
        <span class="mb-10">会议室简介</span>
        <input placeholder="请输入" />
      </div>
      <!-- 按钮 -->
      <div class="sever bg-fff pl-20 pr-20 mt-20">
        <div class="btn flex fcc">
          <div>按钮</div>
        </div>
      </div>
      <!-- 选择时间选项 -->
      <div class="select rel dsn fixed">
        <div class="option abs pl-20 bg-fff pr-20">
          <div class="sel flex aic jc-sb">
            <span class="text1">取消</span>
            <span class="text2">确定</span>
          </div>
          <ul class="list f14 fdc">
            <li class="item flex jc-sa aic">
              <span>2020年</span>
              <span>01月</span>
              <span>01日</span>
              <span>07时</span>
              <span>00分</span>
            </li>
            <li class="item flex jc-sa aic">
              <span>2019年</span>
              <span>01月</span>
              <span>01日</span>
              <span>08时</span>
              <span>01分</span>
            </li>
            <li class="item flex jc-sa aic">
              <span>2018年</span>
              <span>01月</span>
              <span>01日</span>
              <span>09时</span>
              <span>02分</span>
            </li>
            <li class="item">
              <div class="oneday flex aic jc-sa">
                <span>2017年</span>
                <span>01月</span>
                <span>01日</span>
                <span>10时</span>
                <span>03分</span>
              </div>
            </li>
            <li class="item flex jc-sa aic">
              <span>2016年</span>
              <span>01月</span>
              <span>01日</span>
              <span>11时</span>
              <span>04分</span>
            </li>
            <li class="item flex jc-sa aic">
              <span>2015年</span>
              <span>01月</span>
              <span>01日</span>
              <span>12时</span>
              <span>05分</span>
            </li>
            <li class="item flex jc-sa aic">
              <span>2014年</span>
              <span>01月</span>
              <span>01日</span>
              <span>13时</span>
              <span>06分</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 选择上传附件方式 -->
      <div class="form fixed dsn rel">
        <div class="mode abs bg-fff aic fdc">
            <span class="type">拍照</span>
            <span class="type">文件</span>
            <span class="type">相册</span>
            <span class="typeof ">取消</span>
        </div>
      </div>
    </div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    // 点击显示时间选择器
    $(".mitting").on("click", ".time", function () {
      $(".select").show();
    });
    //选择时间选择器隐藏
    $(".select").on("click", ".sel span", function () {
      if ($(this).text() === "取消" || $(this).text() === "确定") {
        $(this).closest(".select").hide();
      }
    });
    $('.upload').on('click',function(){
        $('.form').show()
    })
    $('.form').on('click','.mode span',function(){
        if($(this).text() ==="拍照"||$(this).text() ==="文件"||$(this).text() ==="相册"||$(this).text() ==="取消"){
            $(this).closest('.form').hide()
        }
    })
  </script>
</html>
